<template>
	<view class="container">
		<view class="header">
			<text class="title">裹蒸粽与各地常用粽对比</text>
		</view>

		<view class="content">
			<view class="intro-card">
				<view class="card-image">
					<image
						src="https://qcloud.dpfile.com/pc/fCQIGM4-EU8pMksd39Fbn29NKLWxbJ9SE4RhLPQRpU1hx3zCHrCaRP4Plb0J6CEP.jpg"
						mode="aspectFill"></image>
				</view>
				<view class="card-content">
					<text class="card-title">裹蒸粽</text>
					<text class="card-desc">是广东肇庆的传统名点，历史悠久，其个大、料足、味香,以柊叶进行包裹而著名。</text>
				</view>
			</view>

			<view class="comparison-table">
				<view class="table-header">
					<text class="table-title">粽子类型对比</text>
				</view>

				<view class="table-row">
					<view class="table-cell"> </view>
					<view class="table-cell">肇庆裹蒸粽</view>
					<view class="table-cell">高州枧水粽</view>
					<view class="table-cell">客家灰水粽</view>
					<view class="table-cell">珠海斗门粽</view>
					<view class="table-cell">中山芦兜粽</view>
					<view class="table-cell">咸肉粽</view>
					<view class="table-cell">清远驼背粽</view>
					<view class="table-cell">潮汕双烹粽</view>
					<view class="table-cell">台山粽</view>
				</view>

				<view class="table-row">
					<view class="table-cell">特色</view>
					<view class="table-cell">柊叶包裹</view>
					<view class="table-cell">冬叶包裹</view>
					<view class="table-cell">食材中有碱水</view>
					<view class="table-cell">体形、重量大</view>
					<view class="table-cell">芦兜叶包裹</view>
					<view class="table-cell">口感、馅料多样</view>
					<view class="table-cell">形状、制作工艺独特</view>
					<view class="table-cell">奇妙口感</view>
					<view class="table-cell">丰富的馅料和口感</view>
				</view>

				<view class="table-row">
					<view class="table-cell">形状</view>
					<view class="table-cell">三角形</view>
					<view class="table-cell">方形</view>
					<view class="table-cell">三角形</view>
					<view class="table-cell">方形</view>
					<view class="table-cell">方形</view>
					<view class="table-cell">方形</view>
					<view class="table-cell">方形</view>
					<view class="table-cell">三角形</view>
					<view class="table-cell">三角形</view>
				</view>

				<view class="table-row">
					<view class="table-cell">大小</view>
					<view class="table-cell">大</view>
					<view class="table-cell">小</view>
					<view class="table-cell">大</view>
					<view class="table-cell">大</view>
					<view class="table-cell">大</view>
					<view class="table-cell">大</view>
					<view class="table-cell">小</view>
					<view class="table-cell">小</view>
					<view class="table-cell">适中</view>
				</view>

				<view class="table-row">
					<view class="table-cell">馅料</view>
					<view class="table-cell">糯米、水、豆沙、莲蓉</view>
					<view class="table-cell">糯米、水、豆沙、莲蓉</view>
					<view class="table-cell">糯米、水、豆沙、莲蓉</view>
					<view class="table-cell">糯米、烧腌肉、咸蛋</view>
					<view class="table-cell">糯米、绿豆、五花肉、咸蛋黄</view>
					<view class="table-cell">糯米、咸蛋黄、香菇、肥猪肉</view>
					<view class="table-cell">糯米、咸肉、咸蛋黄、香菇等</view>
					<view class="table-cell">糯米、咸肉、咸蛋黄、香菇等</view>
					<view class="table-cell">糯米、咸肉、咸蛋黄、香菇等</view>
				</view>

				<view class="table-row">
					<view class="table-cell">口味</view>
					<view class="table-cell">咸甜适中</view>
					<view class="table-cell">偏甜</view>
					<view class="table-cell">偏咸</view>
					<view class="table-cell">咸甜适中</view>
					<view class="table-cell">偏咸</view>
					<view class="table-cell">偏咸</view>
					<view class="table-cell">偏咸</view>
					<view class="table-cell">偏甜</view>
					<view class="table-cell">偏咸</view>
				</view>

				<view class="table-row">
					<view class="table-cell">制作工艺</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
					<view class="table-cell">浸泡、蒸煮</view>
				</view>

				<view class="table-row">
					<view class="table-cell">食用场景</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
					<view class="table-cell">端午节、日常小吃</view>
				</view>
			</view>



			<!-- 互动标签 -->
			<view class="tag-section">
				<text class="section-title">粽子特色标签</text>
				<view class="tags">
					<view class="tag-item">传统工艺</view>
					<view class="tag-item">特色馅料</view>
					<view class="tag-item">节日传统</view>
					<view class="tag-item">地域特色</view>
					<view class="tag-item">文化传承</view>
					<view class="tag-item">节日美食</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.content {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.intro-card {
		display: flex;
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-image {
		width: 30%;
		border-radius: 10px;
		overflow: hidden;
	}

	.card-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.card-content {
		width: 70%;
		padding: 20rpx;
	}

	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.card-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}

	.comparison-table {
		margin-top: 30rpx;
		width: 100%;
		overflow-x: auto;
		border-collapse: collapse;
		/* 新增表格边框合并 */
	}

	.table-row {
		display: table-row;
		border-bottom: 1px solid #eee;
	}

	.table-cell {
		display: table-cell;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		text-align: left;
		min-width: 150rpx;
		border: 1px solid #eee;
	}


	.table-row:nth-child(odd) {
		background-color: #f9f9f9;
	}

	.table-header .table-row {
		background-color: #f0f0f0;
		font-weight: bold;
	}


	.comparison-section {
		margin-top: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.chart-container {
		width: 100%;
		height: 300rpx;
	}

	.chart-canvas {
		width: 100%;
		height: 100%;
	}

	.tag-section {
		margin-top: 40rpx;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		background-color: #f0f9eb;
		color: #67c23a;
		padding: 10rpx 20rpx;
		margin: 10rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.footer {
		text-align: center;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.footer-text {
		font-size: 28rpx;
		color: #666;
	}
</style>